<template>
  <div>
    <Sreach @search="search" />
    <div class="listNav">
      <span v-for="item in nameList" :key="item">{{ item }}</span>
    </div>
    <div class="listBanner">
      <div
        class="bannercart"
        @click="hide"
        v-for="(item, index) in tiaoshu"
        :key="item.id"
      >
        <span class="image"><img :src="item.goodsImg" /></span>
        <span>{{ item.cartname }}</span>
        <span>{{ item.id }}</span>
        <span>{{ item.time }}</span>
        <span>{{ item.browsenum }}</span>
        <span>{{ item.searchnum }}</span>
        <span>
          <el-switch
            v-model="item.flag"
            inline-prompt
            active-text="显示"
            inactive-text="隐藏"
            @change="change(item.flag, item.cartid)"
          >
          </el-switch
        ></span>
        <div class="btn1">
          <span class="iconfont icon-shenglve" @click.stop="fn2(index)"></span>
          <div class="btn2" v-show="index === flag">
            <span @click="updataBtn(item)">修改</span>
            <span @click.stop="del(item.cartid)">删除 </span>
          </div>
        </div>
      </div>
    </div>
    <div class="footer">
      <div class="left">
        <span class="btnn"><i class="iconfont icon-xiangzuojiantou"></i></span>
        <span
          >显示{{ chushi * 4 - 3 }}-{{
            chushi * 4 - 4 + tiaoshu.length
          }}条&emsp;</span
        >
        <span>共{{ total }}条</span>
      </div>
      <div class="right">
        <el-pagination
          small
          background
          layout="prev, pager, next"
          :total="total"
          class="mt-4"
          :page-size="page"
          @current-change="currentChange"
        >
        </el-pagination>
      </div>
    </div>
    <!-- 修改 -->
    <el-dialog v-model="dialogFormVisible" title="修改产品信息">
      <el-form :model="form">
        <el-form-item label="产品图片" :label-width="formLabelWidth">
          <img
            :src="form.goodsImg"
            alt=""
            style="border-radius: 50%; width: 100px; height: 100px"
          />
          <!-- 上传图片 -->
          <el-upload
            class="avatar-uploader"
            action="https://jsonplaceholder.typicode.com/posts/"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload"
            :on-error="error"
          >
            <img v-if="imageUrl" :src="imageUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><plus /></el-icon>
          </el-upload>
          <!--  -->
        </el-form-item>
        <el-form-item label="产品名称" :label-width="formLabelWidth">
          <el-input v-model="form.cartname" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="添加日期" :label-width="formLabelWidth">
          <div class="demo-date-picker">
            <div class="block">
              <el-date-picker
                v-model="form.time"
                type="date"
                placeholder="选择日期"
                value-format="YYYY-MM-DD"
              >
              </el-date-picker>
            </div>
          </div>
          <!--  -->
        </el-form-item>
        <el-form-item label="浏览量" :label-width="formLabelWidth">
          <el-input v-model="form.browsenum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="搜索量" :label-width="formLabelWidth">
          <el-input v-model="form.searchnum" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="产品状态" :label-width="formLabelWidth">
          <el-switch
            v-model="form.flag"
            inline-prompt
            active-text="显示"
            inactive-text="隐藏"
          ></el-switch>
        </el-form-item>
      </el-form>
      <template #footer>
        <span class="dialog-footer">
          <el-button @click="dialogFormVisible = false">取消</el-button>
          <el-button type="primary" @click="updataTrue(form)">确定</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import Sreach from "../component/Search.vue";
import { ref, computed, onMounted, watch } from "vue";
import { useStore } from "vuex";
import {
  ElSwitch,
  ElPagination,
  ElButton,
  ElDialog,
  ElForm,
  ElFormItem,
  ElInput,
  ElDatePicker,
  ElUpload,
  ElMessage,
} from "element-plus";
import { Plus } from "@element-plus/icons-vue";
export default {
  setup() {
    const store = useStore();
    const nameList = ref(computed(() => store.state.manage.nameList));
    const cartLiat = ref(computed(() => store.state.manage.cartLiat));
    const active = ref(-1);
    const flag = ref(-1);
    const page = ref(4);
    const max = ref(1);
    const chushi = ref(1);
    const total = ref(computed(() => cartLiat.value.length));
    //控制搜索
    const son = ref(true);
    const son2 = ref(computed(() => store.state.manage.flag));
    //修改
    const form = ref({});
    const dialogTableVisible = ref(false);
    const dialogFormVisible = ref(false);
    const formLabelWidth = "140px";
    //上传
    const imageUrl = ref("");
    const handleAvatarSuccess = (res, file) => {
      imageUrl.value = URL.createObjectURL(file.raw);
    };
    const beforeAvatarUpload = (file) => {
      const isLt2M = file.size / 1024 / 1024 < 2;
      if (!isLt2M) {
        ElMessage.error("上传的图片不得大于 2MB!");
      }
      return isLt2M;
    };
    const error = (err) => {
      alert(err + " \r\n提交失败,请尝试其他图片!");
    };
    //获取修改数据
    const updataBtn = (data) => {
      dialogFormVisible.value = true;
      form.value = { ...data };
    };
    //提交修改数据
    const updataTrue = (from) => {
      from.goodsImg = imageUrl.value;
      const data = { ...from };
      dialogFormVisible.value = false;
      store.dispatch("manage/updataAsync", { data });
      imageUrl.value = 0;
      if (!son.value) {
        store.commit("manage/search", son2.value);
      }
    };
    //改变切割位置
    const currentChange = (data) => {
      chushi.value = data;
      flag.value = -1;
    };
    //分页
    const tiaoshu = ref(
      computed(() =>
        cartLiat.value.slice(chushi.value * 4 - 4, chushi.value * 4)
      )
    );
    //控制删除点击按钮显示隐藏
    const fn2 = (data) => {
      if (flag.value == data) {
        flag.value = -1;
      } else {
        flag.value = data;
      }
    };
    //控制显示隐藏按钮
    const change = (value, id) => {
      store.dispatch("manage/upListAsync", { value, id });
      if (!son.value) {
        store.commit("manage/search", son2.value);
      }
    };
    //删除商品
    const del = (name) => {
      if (confirm("是否删除!")) {
        store.dispatch("manage/delListAsync", name);
      }
      flag.value = -1;
    };
    //搜索
    const search = (value) => {
      if (value) {
        son.value = false;
        store.commit("manage/search", value);
      } else {
        son.value = true;
        store.dispatch("manage/getListAsync");
      }
    };
    //点击主体隐藏
    const hide = () => {
      flag.value = -1;
    };
    //初始挂载
    onMounted(() => {
      store.dispatch("manage/getListAsync");
    });
    //关闭修改窗口，清除
    watch(dialogFormVisible, () => {
      if (!dialogFormVisible.value) {
        imageUrl.value = "";
      }
    });
    //获取数据
    const fnnn = () => {
      console.log(cartLiat.value);
    };
    return {
      nameList,
      cartLiat,
      tiaoshu,
      active,
      flag,
      page,
      total,
      chushi,
      max,
      fn2,
      del,
      currentChange,
      change,
      search,
      hide,
      // 修改
      form,
      formLabelWidth,
      dialogFormVisible,
      dialogTableVisible,
      updataBtn,
      updataTrue,
      fnnn,
      //上传
      handleAvatarSuccess,
      beforeAvatarUpload,
      error,
      imageUrl,
    };
  },
  components: {
    Sreach,
    ElSwitch,
    ElPagination,
    ElButton,
    ElDialog,
    ElForm,
    ElFormItem,
    ElInput,
    ElDatePicker,
    //上传
    Plus,
    ElUpload,
  },
};
</script>
<style lang="less" scoped>
@import "../../../../assets/css/manage.less";
</style>
